<template>
    <div class="row home-content">
        <div class="col-sm-12">
            <slide :items="slides"></slide>
            <div class="row me-list">
                <div class="new-blog col-sm-8">
                    <items :title="'最新文章'" :items="list"/>
                </div>
                <right-article></right-article>
            </div>
        </div>
    </div>
</template>
<script>
    import RightArticle from './common/RightArticle'
    import Items from './article/Items'
    import Slide from './common/Slide'
    import {mapState, mapActions} from 'vuex'

    export default {
        components: {
            RightArticle,
            Slide,
            Items
        },
        created() {
            this.getList();
            if (this.slides.length <= 0) {
                this.getSlidesAction();
            }
        },
        methods: {
            ...mapActions({getSlidesAction: "slides"}),
            ...mapActions("article", ["getList"])
        },
        computed: {
            ...mapState({
                list: state => state.article.list,
                slides: state => state.slides
            }),
        }
    }
</script>

<style lang="scss">
    .me-list {
        margin-top: 20px;
    }

    .home-content {
        padding-top: 30px;
    }
</style>
